---
slug: create-react-app #路径，不能重复
title: create-react-app # 标题
authors: [] # 作者，在authors.yml配置
tags: [facebook, hello, docusaurus] # 标签，在tags.yml配置
toc_min_heading_level: 2 # 最小展示标题
toc_max_heading_level: 5 # 最大展示标题
---

#### craco实现无需eject即可修改webpack.config.js

```shell
npm i -D @craco/craco
```

#### 在tsx内部导入module.css不行,需要配置

1. 在src目录下新建global.d.ts
    ```ts
        declare module "*.module.scss" {
            const classes: { readonly [key: string]: string };
            export default classes;
        }
    ```
2. craco配置

3. package.json修改`"start": "craco start",

##### 使用craco解析scss,module.scss

```shell
npm install sass sass-loader css-loader style-loader
```

```js title="craco.config.js"
// craco.config.js
const { addAfterLoader } = require('@craco/craco');

module.exports = {
    module:{
        rules:[
            {
                test: /\.scss$/,
                use:[
                    'style-loader',
                    'css-loader',
                    {
                        loader: 'sass-loader',
                        options: {
                            implementation: require.resolve('sass'),
                        }
                    }
                ]
            },
            {
                test: /\.module\.scss$/,
                use:[
                    'style-loader',
                    'css-loader',
                    {
                        loader: 'sass-loader',
                        options: {
                            modules: true,
                            camelCase: true,
                            implementation: require.resolve('sass'),
                        }
                    }
                ]
            }
        ]
    }
};

```